<template>
  <div>
    <div style="border: 1px solid #ccc; margin-top: 10px" v-if="isClose">
      <!-- 工具栏 -->
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editor"
        :default-config="toolbarConfig"
      />
      <!-- 编辑器 -->
      <Editor
        v-model="ehtml"
        style="height: 400px; overflow-y: hidden"
        :default-config="editorConfig"
        @onChange="onChange"
        @onCreated="onCreated"
      />
    </div>
  </div>
</template>

<script>
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { getNlQueryFsUrl, postUpload } from '@/api/management/user'
import { fd } from '@/utils'
const _self = this
export default {
  name: 'WangEditor',
  components: { Editor, Toolbar },
  props: {
    // 表格数据
    html: {
      type: String,
      default: null
    },
    isClose: {
      //解决编辑器缓存问题
      type: Boolean,
      default: false
    },

    // 表格数据
    getHtml: {
      type: Function,
      default: function () {}
    }
  },
  data () {
    return {
      editor: null,
      ehtml: null,
      toolbarConfig: {
        // toolbarKeys: [ /* 显示哪些菜单，如何排序、分组 */ ],
        // excludeKeys: [ /* 隐藏哪些菜单 */ ],
      },
      editorConfig: {
        placeholder: '请输入内容...',
        customUploadImg: {},
        // autoFocus: false,

        // 所有的菜单配置，都要在 MENU_CONF 属性下
        MENU_CONF: {
          // 配置上传图片
          uploadImage: {
            //server必须要配置正确
            server: '/pms-fs/fileCommon/base64',

            maxFileSize: 4 * 1024 * 1024, // 1M
            // 最多可上传几个文件，默认为 100
            maxNumberOfFiles: 10,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            // allowedFileTypes: [],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            fieldName: 'file',
            meta: {
              //官网中把token放到了这里，但是请求的时候会看不到token
            },
            headers: {
              //所以token放这里
              // token: window.sessionStorage.token,
            },
            // 将 meta 拼接到 url 参数中，默认 false
            metaWithUrl: false,
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: false,
            // 超时时间，默认为 10 秒
            timeout: 5 * 1000, // 5 秒
            customInsert (res, insertFn) {
              console.log('customInsert_file', res)
              // JS 语法
              // res 即服务端的返回结果
              // 从 res 中找到 url alt href ，然后插图图片
              insertFn(res.data)
            },
            customUpload: (file, insertFn) => {
              let FD = new FormData();
              FD.append(`file`, file);
              postUpload(FD).then((res) => {
                if (res.code === 0 && res.data.bcode === 0) {
                  insertFn(
                    this.$store.getters.baseUrl + res.data.bdata[1],
                    file.name,
                    res.data.bdata[1]
                  );
                }
              });
            },
          },
          // 上传视频
          uploadVideo: {
            fieldName: 'file',
            server: '/pms-fs/fileCommon/base64',
            headers: {
              // 'Spang-Auth': getStore({ name: 'access_token' }),
            },
            async customUpload (file, insertFn) {
              postUpload(
                fd({
                  file: file
                })
              ).then(res => {
                if (res.code === 0 && res.data.bcode === 0) {
                  insertFn(
                    this.$store.getters.baseUrl + res.data.bdata[1],
                    file.name,
                    res.data.bdata[1]
                  )
                }
              })
            }
          }
        }
      }
    }
  },
  watch: {
    html (val) {
      console.log('htmlhtmlhtmlhtmlhtmlhtml', val)
      if (val) {
        this.$nextTick(v => {
          this.ehtml = val + ''
        })
      } else {
        this.ehtml = ''
      }
    }
  },
  mounted () {
    if (this.html) {
      this.$nextTick(v => {
        this.ehtml = this.html
      })
    } else {
      this.ehtml = ''
    }

    // 模拟 ajax 请求，异步渲染编辑器
  },
  beforeDestroy () {
    const editor = this.editor
    if (editor == null) return
    // 配置服务器端地址 upload:上传图片地址
    editor.destroy() // 组件销毁时，及时销毁 editor ，重要！！！
  },
  methods: {
    onCreated (editor) {
      const me = this
      //新增至此
      this.editor = Object.seal(editor) // 【注意】一定要用 Object.seal() 否则会报错

      // this.$nextTick(v => {
      //   console.log('editor33434333', this.editorConfig.customUploadImg)
      //   this.editorConfig.customUploadImg = function (resultFiles, insertImgFn) {
      //     // resultFiles 是 input 中选中的文件列表
      //     // insertImgFn 是获取图片 url 后，插入到编辑器的方法
      //     me.filesToBase64(resultFiles)
      //   }
      //   //
      // })
      // this.editor.create()
    },
    onChange (editor) {
      let ttt = editor.getHtml()
      // console.log('onChange', editor.getHtml()) // onChange 时获取编辑器最新内容
      this.$emit('update:html', ttt)
      this.$emit('getHtml', editor.getHtml())
    },
    insertTextHandler () {
      const editor = this.editor
      if (editor == null) return
      editor.insertText(' hello ')
    },
    //插入
    insertFn (res) {
      console.log('insertFninsertFn', res)
    },
    printEditorehtml () {
      const editor = this.editor
      if (editor == null) return
      this.$emit('update:html', editor.getHtml())
      console.log(editor.getHtml())
      this.$emit('getHtml', editor.getHtml())
    },
    disableHandler () {
      const editor = this.editor
      if (editor == null) return
      editor.disable()
    }
  }
}
</script>
<style src="@wangeditor/editor/dist/css/style.css"></style>
